<template>
  <div>
    <schedule />
    <div class="personal">
      <div class="container">
        <h2 class="pub_title">个人中心</h2>
        <el-row class="plist">
          <el-col class="plist_col">
            <div class="title_box">
              <el-image :src="src1" />
              <p>基本信息</p>
            </div>
            <div class="status">已完成</div>
            <div class="btn">
              <el-link href="#" :underline="false">修改</el-link>
            </div>
          </el-col>
          <el-col class="plist_col">
            <div class="title_box current">
              <el-image :src="src2" />
              <p>正式报名</p>
            </div>
            <div class="status">未提交</div>
            <div class="btn">
              <el-link href="#" :underline="false">修改</el-link>
              <el-link href="#" :underline="false">提交</el-link>
            </div>
          </el-col>
          <el-col class="plist_col">
            <div class="title_box">
              <el-image :src="src3" />
              <p>我的消息</p>
            </div>
            <div class="status">
              <em>{{ msg_num }}</em> 条
            </div>
            <div class="btn">
              <el-link href="#" :underline="false">查看</el-link>
            </div>
          </el-col>
          <el-col class="plist_col">
            <div class="title_box">
              <el-image :src="src4" />
              <p>报名费支付</p>
            </div>
            <div class="status">已完成</div>
            <div class="btn">
              <el-link href="#" :underline="false">支付</el-link>
            </div>
          </el-col>
        </el-row>

        <div class="quick_link">
          <h2 class="pub_title">快速链接</h2>
          <el-row class="link_item">
            <el-col :span="8">
              <el-link
                href="https://cn.ceibs.edu/sites/portal.prod.dpmgr.ceibs.edu/files/2021-10/2022_CEIBS_Finance_MBA_Programme.pdf"
                target="_blank"
                :underline="false"
              >
                <span class="pub_circle">
                  <el-image :src="linksrc1" />
                </span>
                <span>下载课程册</span>
              </el-link>
            </el-col>
            <el-col :span="8">
              <el-link
                href="https://application.ceibs.edu/FMBAApplication/myStudy.do#"
                :underline="false"
              >
                <span class="pub_circle">
                  <el-image :src="linksrc2" />
                </span>
                <span>笔辅中心</span>
              </el-link>
            </el-col>
            <el-col :span="8">
              <el-link href="/study" :underline="false">
                <span class="pub_circle">
                  <el-image :src="linksrc3" />
                </span>
                <span>学习中心</span>
              </el-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="apply_time">
      <div class="container">
        <h2 class="pub_title">申请时间</h2>
        <el-table
          :data="timeList"
          border
          fit
          style="width: 100%"
          class="apply_table"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#003963',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#003963',
          }"
          :cell-style="{
            borderColor: '#003963',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="id" label="" width="80"> </el-table-column>
          <el-table-column prop="deadline" label="申请截止"> </el-table-column>
          <el-table-column prop="written" label="笔试"> </el-table-column>
          <el-table-column prop="interview" label="面试"> </el-table-column>
          <el-table-column prop="result" label="录取结果"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="activity">
      <div class="container">
        <el-row class="activity_wrap">
          <el-col :span="11" :xs="24" class="future">
            <h2 class="pub_title">近期活动</h2>
            <el-row class="future_list">
              <el-col v-for="item in newsList" :key="item.id">
                <div class="atime">{{ item.date }}</div>
                <div class="abox">
                  <span class="atitle">{{ item.title }}</span>
                  <el-link
                    :href="item.url"
                    :class="['atext', { abtn: item.status }]"
                    :underline="false"
                    >{{ item.action }}</el-link
                  >
                </div>
              </el-col>
              <el-link href="#" class="act_more" :underline="false"
                >更多活动>></el-link
              >
            </el-row>
          </el-col>
          <el-col :span="11" :xs="24" class="consult">
            <h2 class="pub_title">一对一咨询</h2>
            <el-row class="cform">
              <p>
                我们将尽快安排招生老师与您进行电话咨询。为了更好地了解您的需求，建议您在下方留言区写下您想要进一步了解的课程信息。
              </p>
              <el-col>
                <el-form :model="form" label-width="50px" label-position="top">
                  <el-form-item label="类型">
                    <el-checkbox-group v-model="form.type">
                      <el-checkbox label="预约来学院咨询" name="type" />
                      <el-checkbox label="预约与招生老师电话咨询" name="type" />
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="留言">
                    <el-input v-model="form.desc" type="textarea" rows="5" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import src1 from "../../assets/images/person_img01.png";
import src2 from "../../assets/images/person_img02.png";
import src3 from "../../assets/images/person_img03.png";
import src4 from "../../assets/images/person_img04.png";
import linksrc1 from "../../assets/images/link_img01.png";
import linksrc2 from "../../assets/images/link_img02.png";
import linksrc3 from "../../assets/images/link_img03.png";
import schedule from "@/components/schedule/schedule.vue";
export default {
  name: "my",
  components: { schedule },
  props: {},
  data() {
    return {
      src1: src1,
      src2: src2,
      src3: src3,
      src4: src4,
      linksrc1: linksrc1,
      linksrc2: linksrc2,
      linksrc3: linksrc3,
      show: false,
      msg_num: 10,
      form: {
        type: [],
        desc: "",
      },
      timeList: [
        {
          id: "第一轮",
          deadline: "2021年12月7日（周二）下午5点",
          written: "2021年12月18日",
          interview: "2022年1月中旬",
          result: "2022年1月下旬（春节前）",
        },
        {
          id: "第二轮",
          deadline: "2021年12月7日（周二）下午5点",
          written: "2022年3月5日",
          interview: "2022年3月下旬",
          result: "2022年4月中下旬",
        },
        {
          id: "第三轮",
          deadline: "2021年12月7日（周二）下午5点",
          written: "2022年6月11日",
          interview: "2022年6月底",
          result: "2022年7月中上旬",
        },
      ],
      newsList: [
        {
          id: 1,
          title: "活动名称活动名称活动名称活动名称活动名称",
          date: "2021-11-24",
          url: "#",
          status: 1,
          action: "立即报名",
        },
        {
          id: 2,
          title: "活动名称活动名称活动名称活动名称活动名称",
          date: "2021-11-24",
          url: "#",
          status: 0,
          action: "取消报名",
        },
        {
          id: 3,
          title: "活动名称活动名称活动名称活动名称活动名称",
          date: "2021-11-24",
          url: "#",
          status: 0,
          action: "取消报名",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.personal {
  padding: 5% 0;

  .plist {
    margin-top: 34px;
    padding: 10px 0;
    overflow: hidden;
  }

  .plist_col {
    float: left;
    box-sizing: border-box;
    max-width: 22%;
    flex: 0 0 22%;
    display: block;
    background: #ffffff;
    box-shadow: 0px 0px 9px 2px rgba(36, 68, 124, 0.15);
    border-radius: 5px;
    margin: 0 10px;
    padding-bottom: 2%;
    text-align: center;

    .title_box {
      width: 100%;
      padding: 15% 0;
      background: #f0f5fa;

      .el-image {
        height: 60px;
        display: inline-block;
      }

      p {
        margin-top: 27px;
        font-size: 20px;
        line-height: 20px;
      }
    }

    .current {
      background: #c6a67d;
      color: #fff;
    }

    .status {
      font-size: 18px;
      color: #727171;
      padding: 10% 0;

      em {
        color: #b9131a;
      }
    }

    .btn {
      a {
        width: 65px;
        height: 35px;
        line-height: 35px;
        margin: 0 5px;
        background: #c6a67d;
        display: inline-block;
        border-radius: 5px;
        color: #fff;

        &:hover {
          color: #ededed;
        }
      }
    }
  }
}

.quick_link {
  clear: both;
  margin-top: 70px;

  .link_item {
    margin-top: 47px;
    overflow: hidden;
  }

  .el-col {
    text-align: center;

    a {
      font-size: 20px;

      &:hover {
        color: #003963;
      }
    }
  }
}

.apply_time {
  padding: 4% 0;
  background: #fff;

  .apply_table {
    border: solid 1px #003963;
    margin-top: 45px;
    width: 100%;
  }
}

.activity {
  padding: 4% 0 0;
  overflow: hidden;

  .activity_wrap {
    justify-content: space-between;
  }

  .future {
    width: 45%;
  }

  .future_list {
    margin-top: 33px;
    background: #fff;
    padding: 8%;

    .el-col {
      padding: 6% 0;
      border-bottom: 1px solid #8c8c8c;

      .atime {
        color: #9f9fa0;
      }

      .abox {
        margin-top: 2%;
        display: flex;

        .atitle {
          flex: 3;
          padding-right: 10%;
          line-height: 180%;
          font-size: 18px;
          line-height: 160%;
          color: #5a5a5a;
        }

        .atext {
          flex: 1;
          text-align: right;
          width: 80px;
          height: 35px;
          font-size: 16px;
          line-height: 35px;
          text-align: center;
          color: #c6a67d;
        }

        .abtn {
          background: #c6a67d;
          border-radius: 5px;
          color: #fff;
        }
      }
    }

    .act_more {
      width: 100%;
      display: block;
      margin-top: 2%;
      padding: 4% 0;
      text-align: center;
      color: #8c8c8c;
      font-size: 16px;

      &:hover {
        color: #c6a67d;
      }
    }
  }

  .consult {
    .cform {
      margin-top: 35px;

      .el-col {
        margin-top: 30px;
      }

      p {
        font-weight: 400;
        color: #5a5a5a;
        line-height: 30px;
      }

      ::v-deep .el-form-item__label {
        font-size: 20px;
        font-weight: bold;
        color: #003963;
        padding-bottom: 10px;
      }

      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #c6a67d;
      }

      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #c6a67d;
        border-color: #c6a67d;
      }

      ::v-deep .el-form-item__content {
        padding: 0 0 15px 0;

        button {
          width: 200px;
          height: 45px;
          line-height: 45px;
          background: #c6a67d;
          border-radius: 5px;
          font-size: 22px;
          text-align: center;
          font-weight: 400;
          color: #ffffff;
          border: 1px solid #fff;
        }
      }

      .el-checkbox {
        display: flex;
      }
    }
  }
}

@media (max-width: 768px) {
  .personal {
    padding: 8% 0;

    .plist {
      margin-top: 2%;
    }

    .plist_col {
      margin-top: 5%;
      max-width: 44%;
      flex: 0 0 44%;

      .title_box {
        p {
          font-size: 16px;
        }
      }

      .btn a {
        font-size: 14px;
      }

      .status {
        font-size: 16px;
      }
    }
  }

  .quick_link {
    margin-top: 8%;

    .link_item {
      margin-top: 10%;
      overflow: hidden;
    }

    ::v-deep .el-link__inner {
      display: block;
    }

    .el-col {
      a {
        font-size: 16px;
        line-height: 16px;
        color: #333;
      }
    }

    .pub_circle {
      margin: 0 auto 7px;
      display: block;
    }
  }

  .apply_time {
    padding: 8% 2%;

    .apply_table {
      margin-top: 6%;
    }
  }

  .activity {
    padding: 8% 0 0;

    .future_list {
      padding: 4%;

      .el-col .abox .atext {
        font-size: 14px;
      }

      .act_more {
        font-size: 14px;
      }
    }

    .consult {
      margin-top: 8%;

      .cform {
        padding: 0 4%;

        p,
        ::v-deep .el-checkbox__label {
          font-size: 16px;
        }
      }
    }
  }
}

@media (max-width: 320px) {
  .personal {
    .plist_col {
      max-width: 43%;
      flex: 0 0 43%;

      .btn a {
        width: 50px;
        height: 30px;
        line-height: 30px;
      }
    }
  }

  .activity .future_list .el-col .abox .atitle {
    font-size: 16px;
  }
}
</style>
